<template>
  <div class="dormInspectBoards">
    <div class="bg"></div>
    <h1 class="headerTop">广雅学校宿舍常规检查公示牌</h1>
    <div class="head">
      <div class="hwp">
        <div class="col colNo">宿舍</div>
        <div class="col colName">学生</div>
        <div class="col colRule">制度</div>
        <div class="col colScore">分值</div>
        <div class="col colDate">时间</div>
      </div>
    </div>
    <MarqueeTextDown ref="vMarqueeTextDown" class="sMarqueeTextDown" paddingBottom="100">
      <div class="list">
        <div v-for="item of list" :key="item.id" class="row">
          <div class="col colNo">
            <div class="val">{{item.no}}</div>
          </div>
          <div class="col colName">
            <div class="val">{{item.name}}</div>
          </div>
          <div class="col colRule">
            <div class="val">{{item.rules}}</div>
          </div>
          <div class="col colScore">
            <div class="val" :class="item.score < 0 ? 'red' : ''">{{item.score}}</div>
          </div>
          <div class="col colDate">
            <div class="val">{{item.date}}</div>
          </div>
        </div>
      </div>
    </MarqueeTextDown>
    <div v-show="noData" class="noData"></div>
    <div class="bottomSelect" @click="showSlideSelect">
      <!-- <table>
        <tr>
          <td>{{selectedValues[0].text}}</td>
          <td>{{selectedValues[1].text}}</td>
          <td>{{selectedValues[2].text}}</td>
          <td><ArrowTextBtn :arrow="selectArrow" @click="showSlideSelect">筛选</ArrowTextBtn></td>
        </tr>
      </table> -->
      <div class="bVal valNo">{{selectedValues[0].text}}</div>
      <div class="bVal valName">{{selectedValues[1].text}}</div>
      <div class="bVal valDate">{{selectedValues[2].text}}</div>
      <div class="bVal arrowsBtn">
        <ArrowTextBtn :arrow="selectArrow">筛选</ArrowTextBtn>
      </div>
    </div>
    <SlideSelect ref="vSlideSelect" class="sSlideSelect" @close="closeSlideSelect" />
  </div>
</template>

<script>
import ArrowTextBtn from './ArrowTextBtn.vue'
// import SlideSelect from '@/modules/slide-select/Demo.vue'
import SlideSelect from '@/modules/slide-select/SlideSelectS2.vue'
import MixinSlideSelect from './MixinSlideSelect.js'
import MarqueeTextDown from '@/modules/marquee-text/MarqueeTextDown.vue'
import ajaxApi from '@/modules/ajax-api/index.js'
export default {
  components: {
    ArrowTextBtn,
    SlideSelect,
    MarqueeTextDown
  },
  mixins: [MixinSlideSelect],
  data () {
    return {
      noData: false,
      list: [
        // {
        //   id: '1',
        //   no: 'A1/501',
        //   name: '张三',
        //   rules: 'A1级制度/A2级制度/A3级制度/A4级制度',
        //   score: 0,
        //   date: '2019-04-28 09:25'
        // }
      ]
    }
  },
  watch: {
    list () {
      this.$nextTick(() => { this.$refs.vMarqueeTextDown.change() })
    }
  },
  created () {
    let selectedValues = this.selectedValues
    this.loadData({
      areaId: selectedValues[0].value,
      dormId: selectedValues[1].value,
      range: selectedValues[2].value
    })
  },
  methods: {
    confirm () {
      this.selectedIndexs = this.selectedIndexsTemp.slice(0)
      let selectedValues = this.selectedValues = this.selectedValuesTemp.slice(0)
      this.loadData({
        areaId: selectedValues[0].value,
        dormId: selectedValues[1].value,
        range: selectedValues[2].value
      })
    },
    async loadData (params) {
      this.noData = (this.list = await ajaxApi.getDormRules(params)).length === 0
    }
  }
}
</script>
<style scoped>
.dormInspectBoards {
}
.headerTop {
  height: 120px;
  background-color: #34abd7;
  font-size: 42px;
  color: #fff;
  text-align: center;
  /* line-height: 2.5; */
  /* box-sizing: border-box;
  padding: 30px 0; */

  display: flex;
  align-items: center;
  justify-content: center;
}
.head {
  background-color: #eff9fe;
  font-size: 36px;
  color: #34abd7;
  /* line-height: 2.8; */
  /* box-sizing: border-box; */
  /* padding: 26px 0; */
}
.hwp {
  display: flex;
  text-align: center;
  padding: 0 10px;
  height: 100px;
}

.row {
  display: flex;
  text-align: center;
  font-size: 30px;
  color: #666;
  margin: 10px;
  background-color: #fff;
  border-radius: 16px;
}

.col {
  flex: 1;

  display: flex;
  align-items: center;
  justify-content: center;
}
/* .val {
  width: 100%;
  padding: 20px 0;
} */
.colRule {
  flex: 1.5;
}
.colScore {
  flex: 0.8;
}
.colDate {
  flex: 1.2;
}

.list .colScore .val {
  color: #009944;
}
.list .colScore .val.red {
  color: #e23643;
}

.bg {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  background-color: #f1f1f1;
}

.bottomSelect {
  height: 144px;
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.09);
  position: fixed;
  bottom:0;
  z-index: 10;
  display: flex;

  font-size: 40px;
  text-align: center;
  color: #666;
}
/* .bottomSelect >>> table{
  width: 100%;
} */
.bVal {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.arrowsBtn >>> a{
  font-size: 40px;
  padding: 3px 40px 3px 14px;
  color: #34abd7;
  display: inline;
}
.arrowsBtn >>> i{
  border-width: 0 16px 22px 16px;
  border-color: transparent transparent #34abd7 transparent;
  right: 0px;
  top: 18px;
}
.dormInspectBoards .sSlideSelect {
  font-size:200px;
}

.sSlideSelect >>> .slide-select {
  bottom: 144px;
}

.sMarqueeTextDown {
  position: fixed;
  width: 100%;
  top: 220px;
  bottom: 144px;
}
.noData {
  position: fixed;
  top: 220px;
  /* height: 100px; */
  width: 100%;
  background: url(@/asstes/no-data.png) no-repeat center;
  background-size: 50%;
  padding-top: 50%;
}
</style>
